<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FILES</title>
<%include file="_head.html"/>

<link rel="stylesheet" href="/_paneo/common/codemirror/lib/codemirror.css">
<script src="/_paneo/common/codemirror/lib/codemirror.js"></script>
<script src="/_paneo/common/codemirror/mode/htmlmixed.js"></script>
<script src="/_paneo/common/codemirror/mode/xml/xml.js"></script>
<script src="/_paneo/common/codemirror/mode/javascript/javascript.js"></script>
<script src="/_paneo/common/codemirror/mode/css/css.js"></script>
<style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-scroll {
  overflow: auto;
  height: auto; overflow: visible;
  position: relative;
  outline: none;
  height: 600px;
}
</style>
</head>
<body>

<div class="navbar navbar-fixed-top">

<%include file="_header.html" />

</div>

<div class="container-fluid">

<div class="row-fluid">

<div class="span2">
<!--Sidebar content-->
    <%include file="_sidebar.html" />
</div>
<div class="span10">
    <div id="content">
        <h1>PANEO FILES 
        %if mode != 'view':
        <a href="/paneo/files/" class="btn" style="margin-left:30px;">一覧に戻る</a>
        %endif
        </h1>
        %if mode == 'view' :
        <table class="table table-striped pages-list">
        <thead>
        <tr>
        <th class="c1"></th>
        <th class="c1">filename</th>
        <th class="c1">template</th>
        <th>title</th>
        </tr>
        </thead>
        <tbody>
        %for k,v in sorted(pfiles.items(),key=lambda x:x[1].get('IDX')):
        <tr>
        <td>
        <a href="/paneo/files/edit/${k}/" class="btn">編集</a>
        </td>
        <td>${k}.${v.get('TYPE')}</td>
        <td>
        ${v.get('TYPE')}
        </td>
        <td>
        ${v.get('CAPTION')}
        </td>
        </tr>
        %endfor
        </tbody>
        </table>

        <div class="control-group">
        <div class="controls">
        <p class="help-block">
        上記ファイルは、_cms_templates/フォルダにあります。<br>
        各ファイルともftpで直接編集が可能です。<br>
        <br>
        PANEO CMSは、mako HTMLテンプレートエンジンを利用しています。<br>
        テンプレートを活用した独自の拡張も可能です。<br>
        詳細は下記URLを参照してください。<br>
        <a href="http://www.makotemplates.org/" target="_blank">mako template engine</a>
        </p>
        </div>
        </div>

        %endif:
        <!-- form -->
        %if id :
        <form method="POST">

        <fieldset>
        %if mode == "edit":
        <legend>${id} FILEの編集</legend>

        <div class="control-group">
        <h3 class="control-label" for="HTML">${pfiles[id].get('CAPTION')}</h3>
        <div class="controls">
        <textarea id="HTML" name="HTML" class="input-xlarge">${html_file|h}</textarea>
        <span class="help-inline">FILE: ${id}.html</span>
        </div>
        </div>

        <div class="form-actions">
            <button class="btn btn-primary" type="submit">更新する</button>
            <button class="btn" type="reset" style="margin-left:20px;">Cancel</button>
        </div>
        %endif
        </fieldset>
        </form>
        %endif
    </div><!--/div#content row span-->
</div>

</div><!--/row-->

</div><!--/container-fluid"-->

<hr>

<%include file="_footer.html" />

</div><!--/.fluid-container-->

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("HTML"), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true,
    matchBrackets: true,
    indentUnit: 4,
    indentWithTabs: true,
    enterMode: 'keep',
    lineWrapping: true,
//    onCursorActivity: function() {
//        editor.setLineClass(hlLine, null, null);
//        hlLine = editor.setLineClass(editor.getCursor().line, null, 'activeline');
//    },
//    onChange: function(){
//        editor.save();
//    }
});
</script>

</body>
</html>


